<template>
  <div class="addressCard">
    <section v-if="defaultAddressList[0]" @click="jumpTo">
      <p><span>默认</span>{{defaultAddressList[0].province + defaultAddressList[0].city + defaultAddressList[0].county}}</p>
      <h4>{{defaultAddressList[0].addressDetail}}</h4>
      <p><i>{{defaultAddressList[0].name}}</i>{{defaultAddressList[0].tel}}</p>
      <van-icon name="arrow" />
    </section>
  </div>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';

Vue.use(Icon);

import {  getdefaultAddress } from "../../apis/address";
export default {
  name: "AddressCard",

  data() {
    return {
     defaultAddressList:JSON.parse(localStorage.getItem("defaultAddressList")) 
    };
  },

  mounted() {},

  methods: {
   jumpTo() {
     this.$router.push("/address")
    },
    
       
    
  },
  created () {
         getdefaultAddress({userid:localStorage.getItem("userid")}).then(data=>{
          localStorage.setItem("defaultAddressList",JSON.stringify(data.data.data) ) 
        })
    } 
};
</script>

<style  scoped>

section{
    min-height: 1.1rem;
    background-color: #fff;
    padding: .1rem .2rem;
    position: relative;
}
section p{
   margin:.14rem 0;
}
section h4{
font-size: .18rem;
}
section span{
    display: inline-block;
    background-color:rgb(250, 73, 3);
    color: #fff;
    margin-right: .05rem;
}
section i{
    display: inline-block;
    margin-right: .05rem;
}
.van-icon{
    position:absolute;
    top:50%;
    right: 0;
}
</style>